<template>
<view>
<!-- 活动页面 -->
<view class="bargain-top" v-if="bargain">
  <view class="bargain-banner">
    <image src="/static/images/kj-banner.png"></image>
  </view>
  <view class="bargain-tab">
    <block v-for="(item, index) in bargainList" :key="index">
      <view :id="item.id" :class="'bt-item ' + (activeBargainId == item.id ? 'type-item-on' : '')" @tap="changeTabs">{{item.name}}</view>
    </block>
  </view>
</view>
<view class="pro-list" v-if="bargain">
 
  <view v-for="(item, index) in BargainList" :key="index" class="pro-items">
    <navigator class="pl-left"><image :src="item.original_img?url + item.original_img : '../../../images/unknow.png'"></image></navigator>
    <view class="pl-right">
      <view class="pr-title">{{item.goods_name || ''}}</view>
      <view class="pr-price">
        <view>最低可砍至 <text class="pp-price">¥{{item.end_price || 0}}</text></view>
        <view>
          <view class="original-residue">原价 ¥{{item.shop_price || 0}}</view>
          <view class="original-residue">剩余 {{item.remain_num || 0}}件</view>
        </view>
      </view>    
      <navigator v-if="item.bargain_first.id" :url="'../../Bargain/bargain/bargain?id=' + item.bargain_first.id" class="bg-btn">砍价中</navigator>  
       <navigator v-else :url="'../../goods/goodsInfo/goodsInfo?goods_id=' + item.goods_id + '&item_id=' + (item.item_id > 0?item.item_id:'')" class="bg-btn">去砍价</navigator>  
    </view>
  </view>
</view>



<!-- 订单列表 -->
<view class="ol-fiexd" v-if="!bargain">
   <view class="ol-tabs">
   <block v-for="(item, index) in categories" :key="index">
        <view :id="item.id" :class="activeCategoryId == item.id ? 'type-item-on' : ''" @tap="changeTab"> {{item.name}}</view>
    </block>
  </view>
</view>
<view class="ol-list" v-if="!bargain">
  
  <view v-for="(item, index) in orderList" :key="index" class="ol-product" :data-id="item.id" :data-datas="item" @tap="redirectPage">
    <view class="ol-left">
      <navigator><image :src="item.original_img?url + item.original_img : '../../../images/unknow.png'"></image></navigator>
    </view>
    <view class="ol-right">
      <view class="pr-title">{{item.promotionBargain.goods_name}}{{item.item_key?item.item_key:''}}</view>
      <view class="pr-price" style="width:542rpx;">
        <view class="overtiome-price" v-if="item.status == 0">
            <view class="orders-detail">
                <view>
                <view class="pp-price">现价 ¥{{item.end_price}}</view>
                <view class="original-residues">原价 ¥{{item.goods_price}}</view>
                </view>
                <view class="original-residues">剩余{{item.remain_num}}</view>
               <view class="bg-btn">砍价中</view>
            </view>          
        </view>
        <view class="overtiome-price" v-if="item.status == 1">
            <view class="orders-detail">
                    <view>
                    <view class="pp-price">已砍至最低价 ¥{{item.end_price}}</view>
                    <view class="original-residues"></view>
                    </view>
                    <view class="original-residues"></view>
                <view class="bg-btn">待购买</view>
                </view>          
        </view>
        <view class="overtiome-price" v-if="item.status == 2">
             <view class="orders-detail">
                    <view>
                    <view class="pp-price">成交价 ¥{{item.end_price}}</view>
                    <view class="original-residues"></view>
                    </view>
                    <view class="original-residues"></view>
                <view class="bg-btn">已支付</view>
                </view>          
        </view>
        <view class="overtiome-price" v-if="item.status == 3">
                <view class="orders-detail">
                    <view>
                    <view class="pp-price">成交价 ¥{{item.end_price}}</view>
                    <view class="original-residues"></view>
                    </view>
                    <view class="original-residues"></view>
                <view class="cj-btn">未支付</view>
                </view>  
        </view>
        <view class="overtiome-price" v-if="item.status == 4">
       
            <view class="orders-detail">
                    <view>
                    <view class="pp-price">{{item.order_status == 5 ? '订单作废':item.order_id == 0 ? '活动结束' : '订单取消'}}</view>
                    <view class="original-residues"></view>
                    </view>
                    <view class="original-residues"></view>
                    <view class="cj-btn">失败</view>
             </view> 
            
        </view>
      </view>
     
    </view>
  </view>

  
</view>

 <view class="bargain-accounts">
    <view @tap.stop="show" data-type="bargain" :class="menu_selected?'bg-clr':''">砍价商品列表</view>
    <view @tap.stop="show" data-type="order" :class="!menu_selected?'bg-clr':''">我的砍价</view>
  </view>
</view>
</template>

<script>
var app = getApp();
var request = app.globalData.request;
var common = require("../../../utils/common.js");
import LoadMore from "../../../utils/LoadMore";
var load = new LoadMore();

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      bargain: false,
      menu_selected: false,
      orderList: null,
      //请求的订单列表    
      BargainList: null,
      //活动列表
      activeCategoryId: 0,
      currentPage: 1,
      categories: [{
        name: "全部",
        id: 0
      }, {
        name: "砍价中",
        id: 1
      }, {
        name: "待购买",
        id: 2
      }, {
        name: "未支付",
        id: 3
      }, {
        name: "已支付",
        id: 4
      }, {
        name: "失败",
        id: 5
      }],
      bargainList: [{
        name: "综合推荐",
        id: 0
      }, {
        name: "价格",
        id: 2
      }, {
        name: "热销榜",
        id: 3
      }],
      activeBargainId: 0
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    if (options) {
      if (options.type == 'bargain') {
        uni.setNavigationBarTitle({
          title: '砍价活动'
        });
        this.requestBargainList(0);
        this.setData({
          bargain: true,
          menu_selected: true
        });
      }
    } else {
      this.requestOrderList(0);
    }
  },
  onReachBottom: function () {
    if (load.canloadMore()) {
      if (this.bargain) {
        this.requestBargainList(this.activeBargainId);
      } else {
        this.requestOrderList(this.activeCategoryId);
      }
    }
  },
  onPullDownRefresh: function (e) {
    this.resetData();

    if (this.bargain) {
      this.requestBargainList(this.activeBargainId);
    } else {
      this.requestOrderList(this.activeCategoryId);
    }
  },
  methods: {
    /** 请求订单数据 */
    requestOrderList: function (categoryId) {
      var that = this;
      load.init(that, '', 'orderList');
      var requestUrl = that.url + '/api/Bargain/order_list';
      requestUrl += '/type/' + categoryId;
      that.setData({
        activeCategoryId: categoryId
      });
      requestUrl = requestUrl + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
    },

    /** 请求活动数据 */
    requestBargainList: function (activeBargainId) {
      var that = this;
      load.init(that, '', 'BargainList');
      var requestUrl = that.url + '/api/Bargain/bargain_list';
      requestUrl += '/type/' + activeBargainId;
      that.setData({
        activeBargainId: activeBargainId
      });
      requestUrl = requestUrl + '?p=' + that.currentPage;
      load.request(requestUrl, function (res) {
        that.currentPage++;
        uni.stopPullDownRefresh();
      });
    },
    show: function (e) {
      let t = e.currentTarget.dataset.type;
      this.resetData();

      if (t == 'bargain') {
        uni.setNavigationBarTitle({
          title: '砍价活动'
        });
        this.requestBargainList(0);
        this.setData({
          bargain: true,
          menu_selected: true
        });
      } else {
        uni.setNavigationBarTitle({
          title: '砍价订单'
        });
        this.requestOrderList(0);
        this.setData({
          bargain: false,
          menu_selected: false
        });
      }
    },
    changeTab: function (e) {
      this.resetData();
      this.requestOrderList(e.currentTarget.id);
    },
    changeTabs: function (e) {
      this.resetData();
      this.requestBargainList(e.currentTarget.id);
    },
    //重置数据
    resetData: function () {
      load.resetConfig();
      this.orderList = null;
      this.BargainList = null;
      this.currentPage = 1;
    },
    redirectPage: function (e) {
      var data = e.currentTarget.dataset.datas;

      if (data.status == 0 || data.status == 1) {
        uni.navigateTo({
          url: '../../Bargain/bargain/bargain?id=' + data.id
        });
      } else if (data.status == 2 || data.status == 3) {
        uni.navigateTo({
          url: '../../user/order_detail/order_detail?order_id=' + data.order_id
        });
      } else {
        if (data.order_id == 0) {
          app.globalData.showTextWarining('活动已结束');
        } else {
          uni.navigateTo({
            url: '../../user/order_detail/order_detail?order_id=' + data.order_id
          });
        }
      }
    }
  }
};
</script>
<style>
page{
  height: 100%;
  background-color: #fff;
}
.bargain-banner{
  width: 750rpx;
  height: 320rpx;
}
.bargain-top{
  position: fixed;
  top: 0;
  background-color: #ffffff;
}
.bargain-banner image{
  width: 100%;
  height: 100%;
}
.bargain-tab{
  width: 100%;
  height: 60rpx;
  margin-top: 13rpx;
  display:flex;
  justify-content: space-around;
}
.bt-item{
  font-size: 30rpx;
  text-align: center;
  line-height: 60rpx
}
.t-red{
  color: #fc4141;
}
.bt-tool{
  height: 6rpx;
  width: 150rpx;
  box-sizing: border-box;
  background-color: #fc4141;
  margin: 0 60rpx;
}
.pro-list{
  width: 100%;
  margin-top: 407rpx;
  height: 712rpx;
}
.pro-items{
  height: 165rpx;
  width: 692rpx;
  margin: 30rpx;
  margin-bottom: 62rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f3f3f3;
}
.pl-left{
  width: 136rpx;
  height: 136rpx;
  float: left;
  margin-right: 25rpx;
}
.pl-left image{
  width: 100%;
  height: 100%;
}
.pl-right{
  width: 530rpx;
  float: left;
  height: 136rpx;
}
.pr-title{
  width: 472rpx;
  font-size: 24rpx;
  line-height: 32rpx;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pr-price {
    font-size: 20rpx;
    color: #333333;
    width: 392rpx;
    box-sizing: border-box;
    float: left;
    margin-top: 8rpx;
}
.pp-price{
  color: #fc4141;
  font-size: 24rpx;
}
.original-residue{
  float: left;
  color: #999999;
  font-size: 20rpx;
  margin-top: 5rpx;
  width: 50%;
}
.bg-btn{
  float: left;
  width: 120rpx;
  height: 48rpx;
  font-size: 24rpx;
  background: linear-gradient(to bottom,#fe6547,#fc4141);
  border-radius:24rpx;
  text-align: center;
  line-height: 48rpx;
  color: #fff;
  margin-top: 22rpx;
}
.bargain-accounts{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80rpx;
}
.bargain-accounts view{
  float: left;
  width: 50%;
  text-align: center;
  font-size: 26rpx;
  box-sizing: border-box;
  border: 1px solid #f3f3f3;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #ffffff;
}
.bg-clr{
  background: linear-gradient(to bottom,#fe6547,#fc4141);
  color: #ffffff;
  border: 1rpx solid red;
}



/** 订单列表 **/
.ol-fiexd{
  position: fixed;
  width: 100%;
  background-color: #fff;
}
.ol-tabs{
  height: 70rpx;
  font-size: 26rpx;
  position: relative;
}
.ol-tabs view{
  float: left;
  width: 16.6%;
  text-align: center;
  line-height: 66rpx;
}
.ol-tabs .ol-tool{
  height: 4rpx;
  width: 40rpx;
  margin: 0 42rpx;
  background-color: #fc4141;
  position: absolute;
  bottom: 0;
}
.ol-product{
  height: 194rpx;
  width: 692rpx;
  margin: 0 auto;
  padding-top: 80rpx;
  box-sizing: border-box;
}
.ol-left{
  width: 136rpx;
  height: 136rpx;
  float: left;
}
.ol-left navigator{
  width: 136rpx;
  height: 136rpx;
}
.ol-left navigator image{
  height: 100%;
  width: 100%;
}
.ol-right{
  width: 556rpx;
  height: 136rpx;
  float: left;
  padding: 6rpx 0 0 26rpx;
  box-sizing: border-box;
}

.t-gray{
  width: 100%;
  float: left;
}
.t-gray view{
  float: left;
  width: 50%;
  color: #999999;
}
.pr-price i{
  color: #ff3c31;
  font-size: 26rpx;
}
.pr-btn{
  height: 48rpx;
  width: 120rpx;
  background:linear-gradient(to bottom,#fe6547,#fc4141);
  border-radius: 24rpx;
  float: left;
  font-size: 24rpx;
  line-height: 48rpx;
  color: #ffffff;
  text-align: center;
  margin-top: 25rpx;
}
.min-price{
  margin-top: 25rpx;
}
.cj-btn{
  height: 48rpx;
  width: 120rpx;
  background-color: #999999;
  border-radius: 24rpx;
  float: left;
  font-size: 24rpx;
  line-height: 48rpx;
  color: #ffffff;
  text-align: center;
  margin-top: -5rpx;
}
.overtiome-price{
  margin-top: 30rpx;
}
.type-item-on{
    border-bottom: 4rpx solid #ff6a00;
    font-weight: bold;
    color: #ff6a00;
}

.orders-detail{
    display: flex;
    justify-content: space-between;
}
.original-residues{
  color: #999999;
  margin-top: 5rpx;
}
.bragaining{
    background: linear-gradient(to bottom,#fe6547,#fc4141);
}
</style>